<template>
  <div :class="className">
    <a-card class="card-item" :class="active ? 'active' : ''" hoverable bordered>
      <div class="patient-level" :style="{ background: data.hlcolor }">{{ data.dj }}</div>
      <div class="card-content">
        <div class="item-header flex justify-between">
          <a-avatar :src="avatarMan" />
          <div class="flex-1 font-bold ml-2">
            <div class="flex justify-between">
              <div>{{ data?.brName || '姓名' }}</div>
              <div class="bed-num text-right">{{ data?.bedCode || data?.lastBedCode || '床位号' }}</div>
            </div>
            <div class="flex justify-between">
              <div>
                {{ data?.brXb || '-' }} <span class="ml-2">{{ data?.brAge }}岁</span>
              </div>
              <div>{{ data?.wardName }}</div>
            </div>
          </div>
        </div>
        <div class="mb-2 px-3">
          <LabelValue label-class="text-right w-20 font-semibold mt-2" value-class="font-semibold mt-2" :width="220" label="开始日期" :value="data.startTime" />
          <LabelValue label-class="text-right w-20 font-semibold mt-2" value-class="font-semibold mt-2" :width="220" label="结束日期" :value="data.endTime" />
          <LabelValue
            label-class="text-right w-20 font-semibold mt-2"
            value-class="font-semibold mt-2"
            :width="220"
            label="隔离原因"
            :value="data.isolateReason"
          />
          <div class="flex justify-end">
            <div class="font-semibold mt-2">剩{{ data.remainingDays }}天</div>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import avatarMan from '@/assets/images/avatar-man.png'
import LabelValue from '@/components/LabelValue'
// import PatientPopover from '@/components/InPatientPopover'
// const emit = defineEmits('change-condition')
defineProps({
  active: {
    type: Boolean,
    default: false
  },
  showFooter: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => ({})
  },
  className: {
    type: String,
    default: ''
  },
  patientStatus: {
    type: String,
    default: ''
  }
})
</script>
<style lang="less" scoped>
.card-item {
  width: 300px;
  height: 227px;
  margin: 0 auto;
  &.active {
    border: 1px solid var(--primary-color);
    :deep(.ant-card-body) {
      .item-header {
        color: #ffffff !important;
        background-color: var(--primary-color);
      }
      .bed-num {
        color: #ffffff !important;
      }
    }
  }
  &:hover {
    border: 1px solid var(--primary-color);
  }
  .patient-level {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 24px;
    color: #fff;
    text-align: center;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  :deep(.ant-card-body) {
    height: 100%;
    padding: 0;
    .card-content {
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
      height: 100%;
      .item-header {
        position: relative;
        display: flex;
        margin-bottom: 8px;
        padding: 8px 16px;
        &::after {
          position: absolute;
          bottom: 0;
          left: 6%;
          width: 88%;
          height: 2px;
          border-bottom: 2px dashed #00000010;
          content: '';
        }
        .header-icon {
          position: absolute;
          top: 20px;
          right: 60px;
          width: 71px;
          height: 41px;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
      .bed-num {
        color: var(--primary-color);
        font-size: 18px;
      }
    }
  }
  .patient-status {
    display: flex;
    justify-content: space-between;
    height: 41px;
    padding: 8px 16px;
    border-top: 1px solid #00000010;
  }
}
</style>
